import React, { memo, useEffect, useState } from 'react'
import classNames from 'classnames'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'

import { getRankListAction } from '../../store/actionCreators'

import { getSizeImage } from '@/utils/format-utils'

import {
  RankWrapper,
  ThemeTitleCover
} from './style'

export default memo(function SpecialMusic() {
  const { rankList } = useSelector(state => {
    return {
      rankList: state.getIn(["ranking", 'rankList'])
    }
  }, shallowEqual)

  const dispatch = useDispatch()
  const [currentIndex, setCurrentIndex] = useState(0)

  const handleItemClick = index => {
    setCurrentIndex(index)
  }

  useEffect(() => {
    dispatch(getRankListAction())
  }, [dispatch])
  
  return (
    <RankWrapper>
      {
        rankList.map((item, index) => {
          let header
          if (index === 0 || index === 4) {
            header = <div className="header">
              {index === 0 ? '云音乐特色榜' : '全球媒体榜'}
            </div>
          }
          return (
            <div  key={item.id}>
              {header}
              <ThemeTitleCover>
                <div className={classNames("title-wrapper", {"active": index === currentIndex})}
                  onClick={e => handleItemClick(index)}>
                  <img src={getSizeImage(item.coverImgUrl, 40)} alt=""></img>
                  <div className="title-desc">
                    <p>{item.name}</p>
                    <span className="text-nowrap">{item.updateFrequency}</span>
                  </div>
                </div>
              </ThemeTitleCover>
            </div>
          )
        })
      }
    </RankWrapper>
  )
})